<template>
  <div class="app-container">
    <div>
      <div>
        <div slot="header"
             class="clearfix job-tab-header">
          <span class="span-title">管理员设定</span>
        </div>
        <div>
          <div class=" select-container"
               style="margin-top:-15px">
            <el-row class="">
              <el-col class="">
                <el-form ref="form"
                         label-position='right'
                         size="small"
                         :inline="true"
                         label-width="110px">
                  <el-col :span="5">
                    <el-form-item label=""
                                  prop="user_loginName"
                                  size='small'
                                  style="margin:12px 5px;">
                      <el-input prefix-icon="el-icon-search"
                                placeholder="请输入管理员登录名"
                                v-model="listQuery.condition.user_loginName.value"
                                clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item label=""
                                  prop="user_name"
                                  size='small'
                                  style="margin:12px 5px;">
                      <el-input prefix-icon="el-icon-search"
                                placeholder="请输入管理员名称"
                                v-model="listQuery.condition.user_name.value"
                                clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="9"
                          style="padding-left:10px;margin-top:12px;float:left;"
                          algin="left">
                    <el-button size="small"
                               style="height:30px;padding-top:0px;line-height:30px;"
                               type="success"
                               icon="el-icon-edit"
                               @click="getList('find')">查 询</el-button>
                    <el-button size="small"
                               style="height:30px;padding-top:0px;line-height:30px;"
                               type="danger"
                               icon="el-icon-circle-close-outline"
                               @click="handleReset">重 置</el-button>
                    <el-button size="small"
                               style="height:30px;padding-top:0px;line-height:30px;"
                               type="primary"
                               icon="el-icon-circle-plus-outline"
                               @click="handleCreate">新建</el-button>
                  </el-col>
                </el-form>
              </el-col>

            </el-row>
          </div>
        </div>
      </div>
      <div>
        <el-table :key='tableKey'
                  :data="list"
                  v-loading="listLoading"
                  element-loading-text="给我一点时间"
                  size="small"
                  height="285px"
                  highlight-current-row
                  style="width: 100%;">
          <el-table-column align="center"
                           label="序号"
                           min-width="50px"
                           type="index">
            <template slot-scope="scope">
              <span>{{scope.$index + (serialNumber - 1) * listQuery.rowBounds.limit + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="管理员登录名"
                           min-width="70px"
                           prop="subsysname">
            <template slot-scope="scope">
              <span>{{scope.row.user_loginName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="管理员名称"
                           min-width="70px"
                           prop="name">
            <template slot-scope="scope">
              <span>{{scope.row.user_name}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="组织机构"
                           width="160px"
                           prop="fcTime">
            <template slot-scope="scope">
              <span>{{scope.row.user_orgName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           label="操 作"
                           width="260"
                           class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button style="margin-left:5px;"
                         type="text"
                         size="small"
                         @click="handleDelete(scope.row,'delete')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination background
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :page-sizes="[10,20,30, 50]"
                         :page-size="listQuery.rowBounds.limit"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <!--新建管理员弹出层-->
    <el-dialog v-if="dialogVisibleAddAdmin"
               :close-on-click-modal="false"
               title="添加管理员"
               :visible.sync="dialogVisibleAddAdmin"
               @close='getList'
               width="70%">
      <newAdminUser @changeCloseDialog="changeCloseDialog"></newAdminUser>
    </el-dialog>
  </div>
</template>

<script>
import '@/styles/newstyle.scss'
import {
  compositeSelect,
  forceDeleteItem
} from '@/api/systemManage/adminManagement'
import newAdminUser from './newAdminUser'
export default {
  components: {
    newAdminUser
  },
  directives: {},
  data() {
    return {
      roleFormData: {},
      editJob: {},
      powerRoleData: {},
      // table list
      tableKey: 0,
      list: null,
      listQuery: {
        rowBounds: {
          offset: 0,
          limit: 10
        },
        condition: {
          user_loginName: {
            property: 'user_loginName',
            value: '',
            type: 'LIKE'
          },
          user_name: {
            property: 'user_name',
            value: '',
            type: 'LIKE'
          }
        },
        fields: [],
        sort: [
          {
            direction: 'ASC',
            property: 'order_no'
          }
        ]
      },
      total: null,
      listLoading: false,
      // table list
      selectId: '',
      selectRoleName: '',
      selectSubsysid: '',
      selectRoleid: '',
      serialNumber: 1,
      dialogVisibleAddAdmin: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    changeCloseDialog() {
      this.dialogVisibleAddAdmin = false
      this.getList()
    },
    handleCreate() {
      this.dialogVisibleAddAdmin = true
    },
    // 翻页器使用
    handleSizeChange(val) {
      this.listQuery.rowBounds.limit = val
      this.listQuery.rowBounds.offset = this.listQuery.rowBounds.limit * (this.serialNumber - 1)
      this.list = null
      this.getList()
    },
    // 翻页器使用
    handleCurrentChange(val) {
      this.serialNumber = val
      this.listQuery.rowBounds.offset =
        this.listQuery.rowBounds.limit * (val - 1)
      this.getList()
    },
    handleDelete(row, flag) {
      this.$confirm('此操作将删除管理员【' + row.user_name + '】, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const condition = {
            userId: row.user_id
          }
          forceDeleteItem(condition).then(response => {
            this.$message({
              message: '删除成功。',
              type: 'success'
            })
            this.getList(flag)
          })
        })
        .catch(error => {
          console.error(error)
        })
    },
    getList(flag) {
      this.listLoading = true
      this.listQuery.orgId = this.$store.getters.orgId
      if (flag === 'find') {
        this.listQuery.rowBounds.offset = 0
        this.serialNumber = 1
        this.total = 0
      }
      if (flag === 'delete') {
        if (this.listQuery.rowBounds.offset == (this.total - 1)
          && this.listQuery.rowBounds.offset >= this.listQuery.rowBounds.limit) {
          this.listQuery.rowBounds.offset -= this.listQuery.rowBounds.limit
          if (this.serialNumber * this.listQuery.rowBounds.limit >= this.total) {
            this.serialNumber -= 1
          }
        }
      }
      const that = this
      this.listQuery.isExist = 1
      compositeSelect(this.listQuery).then(response => {
        this.list = response.data.data.records
        this.total = response.data.data.count
        this.listLoading = false
      })
    },
    handleReset() {
      this.listQuery.condition.user_name.value = ''
      this.listQuery.condition.user_loginName.value = ''
      this.listQuery.rowBounds.offset = 0
      this.listQuery.rowBounds.limit = 10
      this.serialNumber = 1
      this.list = null
      this.total = 0
      this.getList()
    }
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}
.select-container {
  padding: 10px 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  border: 1px solid #eeeeee;
}
.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.el-button--mini,
.el-button--mini.is-round {
  padding: 3px 5px;
}
</style>
